<template>
  <div>
    <img class="image" v-for="(item,key) in background" :src="item" alt="" :key="key" @click="setBackground(item)">
  </div>
</template>

<script>
import {ApiConfig} from "@/config/AxiosApi";
import Cookies from "js-cookie"

export default {
  name: "NavUrl",
  props:{
    background: []
  },
  methods:{
    setBackground(background){
      this.$axios.post(ApiConfig["useraddbackground"],{
        "userid": Cookies.get("user"),
        "token": Cookies.get("token"),
        "background": background[0]
      })
          .then(res=>{
            this.$message.success(res["data"]["msg"])
            document.body.style.backgroundImage = "url('" + background + "')";
            Cookies.set("background",background[0],{expires:365})
          })
          .catch(err=>{
            console.log(err)
          })
    }
  }
}
</script>

<style scoped>
.image{
  width: 288px;
  height: 150px;
  border-radius: 10px;
  margin-left: 8px;
  margin-bottom: 4px;
}
.image:hover{
  cursor: pointer;
}
</style>